<template>
	<view class="page page-bg" >
		<view class="tab-wraps">
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color='#0bbf68' bg-color='transparent' @change="changeTab"></u-tabs>
		</view>
		<view v-if="items.length <= 0" class="empty">
			<u-empty v-if='current===0' mode='list' text='您还没有任何预约记录~'></u-empty>
			<u-empty v-if='current===1' mode='list' text='您还没有任何挂号记录~'></u-empty>
		</view>
		<block v-if="current===0">
			<view v-if="items.length > 0" class="meet-list content-20">
				<view  :class="item.id?'meet-item meet-item-active':'meet-item'" v-for="item in items" :key='item.id' @click="goDetail(item)">
					<view class="meet-status">
						<view class="meet-title">{{item.bookingTypeName}}</view>
						<view class="status theme" v-if="item.state===-1">预约中</view>
						<view class="status red" v-if="item.state===0">预约失败</view>
						<view class="status theme" v-if="item.state===1">预约成功</view>
					</view>
					
					<view class="meet-info">
						<view class="info">
							<view class="dog">{{item.nickName}}({{item.varietiesName}})</view>
							<view class="desc">{{item.bookingTime | formatTime}}</view>
						</view>
						<view class="btns">查看详情</view>
					</view>
				</view>
			</view>
		</block>
		
		<block v-if="current===1">
			<view v-if="items.length > 0" class="meet-list content-20">
				<view  :class="item.id?'meet-item meet-item-active':'meet-item'" v-for="item in items" :key='item.id' @click="goDetail(item)">
					<view class="meet-status">
						<view class="meet-title">{{item.doctorName}}</view>
					</view>
					
					<view class="meet-info">
						<view class="info">
							<view class="dog">{{item.nickName}}({{item.varietiesName}})</view>
							<view class="desc">{{item.makeDate | formatTime}}</view>
						</view>
						<view class="btns">查看详情</view>
					</view>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				common,
				list: [
					{ name: '我的预约' }, 
					{ name: '我的挂号' },
				],
				current: 0,
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
			}
		},
		
		onLoad() {
			this.pageSize = common.pageSize
			this.getItems()
		},
		
		methods: {
			changeTab(index) {
				this.pageIndex = 1
				this.items = []
				this.current = index
				this.getItems()
			},
			
			getItems() {
				let { pageIndex, pageSize} = this.$data
				if(this.current===0) {
					api.getMyBookingPage({ isArrive: false, pageIndex, pageSize},(res) => {
						 this.totalCount = res.totalCount
						 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
						 let temp = res.items
						 if(this.pageIndex !== 1) {
						     temp = [...this.items, ...res.items]
						 }
						 this.items = temp
					}) 
				}else{
					api.getUserAppointmentRecord({ pageIndex, pageSize },(res) => {
						 this.totalCount = res.totalCount
						 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
						 let temp = res.items
						 if(this.pageIndex !== 1) {
						     temp = [...this.items, ...res.items]
						 }
						 this.items = temp
					})
				}
			},
			
			goDetail(item) {
				if(this.current === 0) {
					this.$link('/pagesMine/meetDetail?info='+JSON.stringify(item))
				}else{
					this.$link('/pagesMine/registerDetail?info='+JSON.stringify(item))
				}
			}
		},
		
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab-wraps{
		background-color: #fff;
	}
	.meet-item{
		background-color: #fff;
		border-radius: 10upx;
		padding: 20upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	
	.meet-status{
		@include flex-base;
		justify-content: space-between;
	}
	.meet-title{
		font-size: $font-size-30;
		font-weight: bold;
	}
	.status{
		font-size: $font-size-28;
	}
	.meet-info{
		margin-top: 20upx;
		@include flex-base;
		justify-content: space-between;
		
	}
	.info{
		display: flex;
		flex-direction: column;
	}
	.dog{
		font-size: $font-size-26;
		color: #666666;
		margin-bottom: 10upx;
		background-image: url(../static/icon_09.png);
		background-size: 23upx 18upx;
		background-repeat: no-repeat;
		background-position: left center;
		padding-left: 35upx;
	}
	.desc{
		background-image: url(../static/icon_10.png);
		background-size: 20upx 20upx;
		background-repeat: no-repeat;
		background-position: left center;
		padding-left: 35upx;
	}
	.btns{
		height: 50upx;
		background-color: $theme-color;
		border-radius: 50upx;
		padding: 0 30upx;
		display: flex;
		line-height: 50upx;
		justify-content: center;
		align-content: center;
		color: #fff;
		font-size: 1font-size;
	}
</style>
